<template>
	<view class="content">
		<view v-model="time" class="text-box" @click="home">{{ time }}跳过</view>
		<view class="muted-box" @click="switchMuted">静音</view>
		<view class="rabbitBox">
			<!-- https://nownc178.cq4oss.ctyunxs.cn/home/zy.mp4 -->
			<!-- https://nownc178.cq4oss.ctyunxs.cn/mp4/178.mp4 -->
			<video
				src="https://nownc178.cq4oss.ctyunxs.cn/mp4/178.mp4"
				class="full-page-video-horizontal"
				autoplay="true"
				object-fit="contain"
				:muted="muted"
				:controls="false"
				:show-fullscreen-btn="false"
				:show-play-btn="false"
				:show-center-play-btn="false"
				:show-loading="false"
				:enable-progress-gesture="false"
				:vslide-gesture-in-fullscreen="false"
				@ended="videoEnd"
				@error="videoEnd"
				loop
			></video>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			rabbitShow: false,
			time: 18,
			muted: false,
			timer:null
		};
	},
	// 侦听器
	watch: {},
	// 计算属性
	computed: {},
	created() {},
	// 页面加载
	onLoad(e) {
		var that = this;
		this.timer = setInterval(function () {
			that.time--;
			if (that.time == 0) {
				that.videoEnd();
				uni.reLaunch({
					url: '/pages/index'
				});
			}
		}, 1000);
	},
	// 页面显示
	onShow() {},
	// 方法
	methods: {
		// 视频结束
		videoEnd() {
			this.rabbitShow = false;
			uni.setStorageSync('rabbitShow', true);
		},
		home() {
			console.log('aaa');
			uni.reLaunch({
				url: '/pages/index'
			});
		},
		switchMuted() {
			this.muted = !this.muted;
		}
	},
	// 页面隐藏
	onHide() {
		
	},
	// 页面卸载
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	},
	// 触发下拉刷新
	onPullDownRefresh() {},
	// 页面上拉触底事件的处理函数
	onReachBottom() {}
};
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;

	.muted-box {
		position: absolute;
		top: 120px;
		right: 100px;
		color: #fff;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.1);
		text-align: center;
		line-height: 40px;
		font-size: 13px;
		border-radius: 20px;
	}

	.text-box {
		position: absolute;
		top: 120px;
		right: 10px;
		color: #fff;
		width: 80px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.1);
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		border-radius: 20px;
	}

	.rabbitBox {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;

		.full-page-video-horizontal {
			width: 100%;
			height: 100%;
			z-index: 1002;
		}
	}
}
</style>
